<template>
	<div id="detailBottom">
		<div class="bar-item">
			<div @click="clickKf">
				<a href="#"><img src="../../assets/img/detail/kf.svg"></a>

				<span class="text">客服</span>
			</div>
			<div @click="clickDp">
				<a href="#"><img src="../../assets/img/detail/dp.svg"></a>
				<span class="text">店铺</span>
			</div>
			<div>
				<a href="#" v-if="isTrue"><img src="../../assets/img/detail/sc.png"></a>
				<a href="#" v-else> <img src="../../assets/img/cart/sc1.png"></a>
				<span class="text" @click="clickTrue">收藏</span>
			</div>
			<div class="bg" @click="clickGwc">
				<a href="#"><img src="../../assets/img/detail/gwc.png"></a>
				<div class="cart">加入购物车</div>

			</div>
			<div class="bg" @click="clickGm">
				<a href="#"><img src="../../assets/img/detail/gm.png"></a>
				<div class="buy">购买</div>
			</div>
		</div>
		
	</div>
</template>

<script>
	export default {
		name: 'DeailBottomBar',
		data(){
			return{
				isTrue:true
			}
		},
		methods:{
			clickTrue(){
				this.isTrue = !this.isTrue
			},
			clickDp(){
				console.log('进入店铺')
			},
			clickKf(){
				console.log('正在转入客服')
			},
			clickGwc(){
				/* console.log('加入购物车成功') */
				this.$emit('clickadd')//发出一个事件 然后在详情页实现
			},
			clickGm(){
				console.log('购买成功')
			}
		}
	}
</script>

<style scoped="scoped">
	.bg {
		color: red;
	}
	#detailBottom {
		height: 69px;
		background-color: beige;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
	}

	.bar-item span,
	a,
	.buy,
	.cart {
		float: left;
		padding-left: 14px;
		font-size: 20px;
		padding-top: 15px;
	}
	p{
		text-align: center;
	}

	.bar-item img {
		width: 20px;
		height: 20px;
	}

	
</style>
